<template>
  <section>

    <div class="content-title">{{ title }}</div>
    <div class="speech-component" style="display: flex;">
      <div><el-input v-model="textToSpeak" placeholder="Enter text to speak" /></div>
      <div><el-button @click="speakText">播报</el-button></div>
      <!-- <button @click="voice">播报</button> -->
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue';
import Speech from 'speak-tts';
// import { ElNotification } from 'element-plus';
const speech = new Speech()
const props = defineProps({
  title: {
    type: String,
    defalut: ''
  }
})
const textToSpeak = ref('')
function speakText() {
  if (window.speechSynthesis) {
    const msg = new SpeechSynthesisUtterance(textToSpeak.value);
    // 可选：调整语音参数
    msg.lang = 'zh-CN'; // 设置语言为中文
    msg.rate = 1; // 语速，默认为1
    msg.volume = 1; // 音量，0-1，默认为1
    msg.pitch = 1; // 音调，0-2，默认为1

    window.speechSynthesis.speak(msg);
  } else {
    alert('Your browser does not support Speech Synthesis API.');
  }
}

// if (speech.hasBrowserSupport()) {
//   ElNotification({
//     title: '语音提示',
//     message: '支持语音合成',
//     type: 'success',
//     showClose: false,
//   });
// } else {
//   ElNotification({
//     title: '语音提示',
//     message: '不支持语音合成',
//     type: 'error',
//     showClose: false,
//   });
// }
//初始化语音插件 - init内可以全部为空 - 自定义
speech.init({
  volume: 1, // 音量
  lang: 'zh-CN', // 语言
  rate: 1, // 语速
  pitch: 1, // 音调
  splitSentences: true, // 在句子结束时暂停
  listeners: {
    // 事件
    onvoiceschanged: voices => {
      // // console.log('事件声音已更改', voices);
    },
  },
})
  .then(data => {
    // console.log('语音已准备好，声音可用', data);
  })
  .catch(e => {
    console.error('初始化时发生错误 : ', e);
  });
//语音播报按钮
function voice() {
  speech
    .speak({
      text: '语音已准备好，声音可用', //这里使用文字或者i18n 都可以 看自己需求
    })
    .then(() => {
      // console.log('Success !');
    })
    .catch(e => {
      console.error('An error occurred :', e);
    });
}
</script>

<style scoped>
.speech-component {
  margin: 20px;
}

input {
  padding: 10px;
  font-size: 16px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  margin-left: 10px;
}
</style>
